<template>
	<view class="container" :class="'wp'+platform">
		<view class="head bg-gradual-yellow padding-bottom-sm">
			<view class="status_bar" v-if="platform!='h5'"></view>
			<view class="text-xl padding-sm padding-bottom-xs text-white" @click="doBack">
				<text class="cuIcon-back"></text>
			</view>
			<view class="cu-list menu-avatar">
				<view class="cu-item nobg noaf">
					<view class="cu-avatar radius xl" :style="'background-image:url('+data.setting.logo+');'"></view>
					<view class="content">
						<view class="text-white text-bold text-lg padding-left-xs">{{data.setting.topic}}</view>
						<view class="text-white flex">
							<view class="flex-sub margin-xs">累计 {{data.setting.total}}</view>
							<view class="flex-sub margin-xs">本月 {{data.setting.total_month}}</view>
						</view>
					</view>
					<view class="action">
						<button class="cu-btn nobg no-border noaf flex flex-direction padding-0" open-type="share" v-if="platform=='wxapp'">
							<view class="text-xxl">
								<text class="cuIcon-share"></text>
							</view>
							<view class="text-white">分享</view>
						</button>
						<view v-else @click="showshare=true">
							<view class="text-xxl">
								<text class="cuIcon-share"></text>
							</view>
							<view class="text-white">分享</view>
						</view>
					</view>
				</view>
			</view>
			<view class="padding" @click="naviTo('index/post',{special:2})">
				<view class="text-white bg-black-opacity2 radius padding-xs flex justify-between text-lg">
					<text v-if="hasLogin">{{data.nickname}}你好，快来说点什么吧~</text>
					<text v-else>登录/注册，参与打卡吧~</text>
					<text class="cuIcon-right"></text>
				</view>
			</view>
		</view>
		<scroll-view scroll-x class="bg-white nav" scroll-with-animation>
			<view class="cu-item" :class="currtag==''?'text-yellow cur':''" @tap="LoadList(1,0)">
				全部
			</view>
			<view class="cu-item" :class="currtag==item.name?'text-yellow cur':''" v-for="(item,index) in data.tags" :key="index" @tap="LoadList(1,item.name)">
				{{item.name}}
			</view>
		</scroll-view>
		<view class="diarypost" v-if="dataList">
			<view class="cu-card dynamic">
				<view class="cu-item shadow" v-for="(item, index) in dataList" :key="index">
					<view @click="naviTo('diary/detail',{id:item.id})" class="cu-list menu-avatar">
						<view class="cu-item">
							<view class="cu-avatar round lg" :style="'background-image:url('+item.avatar+');'"></view>
							<view class="content flex-sub">
								<view>{{item.name}}</view>
								<view class="text-gray text-sm flex justify-between">
									<text>{{item.worksTime}}</text>
									<text class="padding-left">已打卡{{item.combo}}天</text>
								</view>
							</view>
						</view>
					</view>
					<view @click="naviTo('diary/detail',{id:item.id})" class="text-content margin-top-xs">
						{{item.content}}
					</view>
					<view @click="naviTo('diary/detail',{id:item.id,act:'play'})" class="diary-video padding-lr padding-bottom-sm" v-if="item.videourl!=''">
						<view class="bg-img only-img bg-video" :style="'background-image:url('+item.cover+');'"></view>
					</view>
					<view class="grid flex-sub padding-lr padding-bottom-sm" v-if="item.pics.length>0" :class="['col-'+item.col,(item.col>1?'grid-square':'')]">
						<view class="bg-img" @click="viewImage(item.pics,key)" :class="item.col>1?'':'only-img'" :style="'background-image:url('+pic+');'" v-for="(pic,key) in item.pics" :key="key">
						</view>
					</view>
					<view @click="naviTo('diary/detail',{id:item.id})" class="diary-tags padding-lr" v-if="item.tags.length>0">
						<view class="cu-tag round bg-orange light" v-for="(tag, key) in item.tags" :key="key">
							<text>{{tag}}</text>
						</view>
					</view>
					<view class="text-gray text-lg flex justify-end padding-top-sm padding-lr margin-bottom">
						<view @click="naviTo('diary/detail',{id:item.id})">
							<text class="cuIcon-attention margin-lr-xs"></text> {{item.views}}
						</view>
						<view @click="doLike(item.id,index)">
							<text class="margin-right-xs margin-left-sm" :class="item.hasliked?'cuIcon-appreciatefill text-yellow':'cuIcon-appreciate'"></text> {{item.like}}
						</view>
						<view @click="naviTo('diary/detail',{id:item.id,act:'comment'})">
							<text class="cuIcon-message margin-right-xs margin-left-sm"></text> {{item.comments.length}}
						</view>
					</view>
					<view @click="naviTo('diary/detail',{id:item.id})" class="bg-gray radius margin-sm comments" v-if="item.comments!=null">
						<view class="cu-list menu">
							<view class="cu-item sm nobg" v-for="(com, key) in item.comments" :key="key" v-if="key<2">
									<view class="content text-sm text-cut">
										<text class="text-blue">{{com.name}}：</text>
										<text class="text-cut">{{com.content}}</text>
									</view>
									<view class="action">
										<text class="text-xs text-gray">{{com.createtime}}</text>
									</view>
							</view>
						</view>
						<view class="text-center text-blue padding-bottom-sm" v-if="item.comments.length>2">查看更多{{item.comments.length}}条评论</view>
					</view>
				</view>
			</view>
			<view class="text-center padding-top-sm" v-if="loadmore=='more'">
				<view class="loadmore">
					<image src="@/static/images/img_home_showmore.png" class="png"></image>
				</view>
			</view>
			<uni-load-more :status="loadmore" :contentText="contentText"></uni-load-more>
		</view>
		<view class="text-center text-gray" v-else>
			<text class="text-empty">空空如也，快来抢沙发吧~</text>
		</view>
		<share :platform="platform" :shareinfo="shareinfo" @closeshare="showshare=false" :showshare="showshare"></share>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	import core from "@/static/core.js"
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	import share from "@/components/util/share.vue"
	
	export default {
		components: {uniLoadMore, share},
		computed: mapState(['userId', 'hasLogin']),
		data() {
			return {
				platform:'',
				page:1,
				currtag:'',
				loadmore:'more',
				contentText:{
					"contentdown":"加载更多数据",
					"contentrefresh":"加载中...",
					"contentnomore":"我是有底线的~"
				},
				showshare:false,
				shareinfo:{
					url:'',
					providers:4,
					provider:{}
				},
				data:{
					title:"日记打卡",
					list:[],
					tags:[],
					nickname:"",
					setting:{
						logo: "/static/logo.png",
						title: "打卡日记",
						topic: "打卡日记",
						total: 0,
						total_month: 0
					}
				},
				dataList:[]
			}
		},
		onLoad() {
			this.platform = core.platform;
			if(core.userinfo.nickname!=null){
				this.data.nickname=core.userinfo.nickname;
			}
			this.LoadList(1,0);
			this.infotags();
			
		},
		onShow() {
			var that = this;
			this.initData('diary',{tag:this.currtag},function(res){
				that.loadmore = res.list.length<15 ? 'noMore' : 'more';
				that.shareinfo = core.initshare(res.setting.topic,res.setting.url,res.setting.logo,res.setting.topic);
			});
			this.LoadList(1,0);
		},
		onPullDownRefresh() {
			var that = this;
			this.initData('diary',{page:1,tag:this.currtag},function(res){
				that.page = 1;
				that.loadmore = res.list.length<15 ? 'noMore' : 'more';
			});
			uni.stopPullDownRefresh();
		},
		onShareAppMessage(e){
			return {
				title:this.data.title,
				path:core.page(this.shareinfo.url)
			}
		},
		onReachBottom() {
			if(this.loadmore=='noMore') return false;
			this.LoadList(this.page+1);
		},
		methods:{
				/**
				 * 延迟执行
				 */
				// setTimeout(()=>{
					
				// },800);
			async like(){
				if(core.userinfo.uid>0){
					var likeCecord=(await this.$api.reqGet({
						url: "menu/selLike/"+core.userinfo.uid,
					})).data;
					console.log(likeCecord)
					console.log(this.dataList)
					for(var j=0;j<this.dataList.length;j++){
						for(var i=0;i<likeCecord.length;i++){
							if(this.dataList[j].id==likeCecord[i].worksid){
								this.dataList[j].hasliked = true;
							}
						}
					}
				}
			},
			async infotags() {
				var that = this;
				that.data.tags = (await this.$api.reqGet({
					url: "menu/selCourseType/0",
				})).data;
			},
			initData(route, data={}, callback=false){
				var that = this;
				// core.get(route,function(res){
				// 	if(typeof(res.message)!='undefined' && typeof(res.type)!='undefined'){
				// 		return core.report(res, true);
				// 	}
				// 	// that.data = res;
				// 	console.log(that.data.list.length)
				// 	uni.setNavigationBarTitle({
				// 		title:res.title
				// 	});
				// 	if(callback){
				// 		callback(res);
				// 	}
				// },data);
			},
			LoadList(page=1,tag=''){
				this.dataList=[];
				var that=this;
				this.$api.reqGet({
					url:"works/selWorks/0/2/"+tag+"/1"
				}).then(
					res => {
						console.log(res)
						if(res.code==4001||res.code==4002){
							this.dataList=[];
						}else{
							that.dataList=res;
							for(let i=0;i<this.dataList.data.length;i++){
								this.dataList.data[i].tags = JSON.parse(this.dataList.data[i].tags);
								this.dataList.data[i].pics= JSON.parse(this.dataList.data[i].pics);
							}
							this.dataList=this.dataList.data;
						}
						that.page = page;
						that.currtag = tag;
						that.loadmore = this.dataList.length<15 ? 'noMore' : 'more';
						/**
						 * 查询当前用户点赞的作品
						 */
						this.like();
					}
				)
				// var that = this;
				// let postvar = {page:page}
				// if(tag!='') postvar.tag = tag;
				// core.get('diary',function(res){
				// 	if(typeof(res.message)!='undefined' && typeof(res.type)!='undefined'){
				// 		return core.report(res);
				// 	}
				// 	if(page>1){
				// 		that.data.list = that.data.list.concat(res.list);
				// 	}else{
				// 		that.data.list = res.list;
				// 	}
				// 	// console.log(data.list)
				// 	that.page = page;
				// 	that.currtag = tag;
				// 	that.loadmore = res.list.length<15 ? 'noMore' : 'more';
				// },postvar);
			},
			naviTo(page,data={}){
				return core.navito(page,data);
			},
			async doLike(id,index){
				if(core.userinfo.uid==0) return core.toast('请先登录sss','login');
				var that = this;
				console.log(that.dataList[index])
				that.dataList[index].pics=JSON.stringify(that.dataList[index].pics);
				that.dataList[index].tags=JSON.stringify(that.dataList[index].tags);
				that.dataList[index].hasliked = !that.dataList[index].hasliked;
				that.dataList[index].like += that.dataList[index].hasliked ? 1 : -1;
				this.$api.reqPost({
					url:"menu/addLike",
					data:{uid:core.userinfo.uid,
						worksid:id,
						worksshow:that.dataList[index]},
				}).then(res=>{
					console.log(res)
					that.dataList[index].tags = JSON.parse(that.dataList[index].tags);
					that.dataList[index].pics= JSON.parse(that.dataList[index].pics)
				})
			},
			viewImage(images=[],index=0){
				uni.previewImage({
					current:index,
					urls:images,
					indicator:'number'
				})
			},
			doBack(){
				return core.back();
			}
		}
	}
</script>

<style>
	page{background: #f1f1f1;}
	.comments .cu-item{min-height: 66upx; height: auto !important;}
	.comments .cu-item .text-sm{font-size: 26upx;}
</style>
